﻿<template>
  <l-layout class="l-tab-page erpCase" v-show="!lr_loadPage">
    <l-panel>
      <template #title>
        <div>{{ $t("采购申请") }}</div>
        <div style="width: 560px;">
          <div class="ml-8" style="float: right">
            <l-tool-btns :hasTableSetting="true" @setting="lr_handleSettingTable" @click="handleAdd()">
              <l-excel-btns></l-excel-btns>
            </l-tool-btns>
          </div>
          <div style="float: right;">
            <el-input placeholder="输入内容" @keyup.enter.native="handleSearch" v-model="searchWord" size="mini">
              <el-button @click="handleSearch" slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </div>
        </div>
      </template>
      <l-table ref="mainTable" :loading="tableLoading" :columns="lr_getPageColumns(columns)" :dataSource="tableData"
        :isPage="true" :pageTotal="tableTotal" :tablePage.sync="tableCurrentPage" @loadPageData="turnTablePage"
        rowKey="f_Id" isMultiSelect>
        <template v-slot:f_PurchaseState="scope">
          <span v-if="scope.row.f_PurchaseState == 1">
            {{ $t("部分采购") }}
          </span>
          <span v-else-if="scope.row.f_PurchaseState == 2">
            {{ $t("已采购") }}
          </span>
          <span v-else>
            {{ $t("未采购") }}
          </span>
        </template>
        <template v-slot:f_ApplySynopsis="scope">
          <el-popover placement="bottom-start" title="物料概要" width="140" trigger="hover" v-if="scope.row.f_ApplySynopsis"
            popper-class="erpcase-apply-popover">
            <div slot="reference">
              {{
                getSynopsis(scope.row.f_ApplySynopsis)
              }}<i class="el-icon-caret-bottom" />
            </div>
            <div class="popover-list">
              <div class="popover-list-item" :key="index" v-for="(item, index) in scope.row.f_ApplySynopsis.split(',')">
                <p style=" overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 120px;">{{ item }}</p>
              </div>
            </div>
          </el-popover>
        </template>
        <l-table-btns :btns="tableBtns" @click="lr_handleTableBtnClick"></l-table-btns>
      </l-table>
    </l-panel>

    <!--表单-->
    <l-dialog :title="$t(formTitle)" :visible.sync="formVisible" :height="980" :width="1000" @ok="handleSave"
      @close="handleCloseForm" @opened="handleOpenedForm">
      <my-form ref="form" :isReadOnly="formDetails"></my-form>
    </l-dialog>
  </l-layout>
</template>

<script>
import MyForm from "./form";
const api = window.$api.erpcase.apply;

export default {
  components: {
    MyForm,
  },
  data() {
    return {
      lr_isPage: true,
      moduleCode: "ERP_PurchaseApplys",

      // 查询参数
      searchWord: "",

      // 表格参数
      tableLoading: false,
      tableData: [],
      tableTotal: 0,
      tableCurrentPage: 1,
      tablePageSize: 50,
      columns: [
        {
          label: "请购单号",
          prop: "f_Number",
          width: 160,
          align: "left",
          dataType: "encode",
        },
        {
          label: "请购主题",
          prop: "f_Theme",
          minWidth: 120,
          align: "left",
          dataType: "input",
        },
        {
          label: "请购日期",
          prop: "f_ApplyDate",
          width: 100,
          align: "left",
          dataType: "datetime",
          format: "yyyy-MM-dd",
        },
        {
          label: "采购状态",
          prop: "f_PurchaseState",
          width: 80,
          align: "left",
        },
        {
          label: "采购人员",
          prop: "f_PurchaseUserId",
          width: 100,
          align: "left",
          dataType: "user",
        },
        {
          label: "物品概要",
          prop: "f_ApplySynopsis",
          width: 200,
          align: "left",
        },
        {
          label: "请购部门",
          prop: "f_ApplyDep",
          width: 100,
          align: "left",
          dataType: "department",
        },
        {
          label: "请购人员",
          prop: "f_ApplyPerson",
          width: 100,
          align: "left",
          dataType: "user",
        },
        {
          label: "关联项目",
          prop: "f_RelatedProject",
          width: 120,
          align: "left",
          dataType: "dataItem",
          dataCode: "140",
        },
      ],
      tableBtns: [
        { prop: "Details", label: "查看",width:40 },
        { prop: "Edit", label: "编辑",width:40 },
        { prop: "Delete", label: "删除",width:40 },
      ],

      // 表单参数
      formVisible: false,
      formTitle: "",
      formEditRow: null,
      formEdit: false,
      formDetails: false,
    };
  },
  computed: {},
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.loadTableData();
    },

    handleSearch() {
      this.loadTableData();
    },
    turnTablePage({ rows }) {
      this.tablePageSize = rows;
      this.loadTableData(true);
    },
    async loadTableData(isNotFirst) {
      if (!isNotFirst) {
        this.tableCurrentPage = 1;
      }
      this.tableLoading = true;
      let queryData = {};

      queryData.f_Theme = this.searchWord;
      queryData.rows = this.tablePageSize;
      queryData.page = this.tableCurrentPage;
      queryData.sidx = "F_CreateDate DESC";
      let data = await this.$awaitWraper(api.getPage(queryData));
      if (data != null) {
        this.tableData = data.rows;
        this.tableTotal = data.records;
      } else {
        this.tableData = [];
      }
      this.tableLoading = false;
    },

    handleEdit($index, row) {
      this.formEdit = true;
      this.formDetails = false;
      this.formEditRow = row;
      this.handleShowForm("编辑采购申请");
    },
    handleDetails($index, row) {
      this.formEdit = true;
      this.formDetails = true;
      this.formEditRow = row;
      this.handleShowForm("采购申请详情");
    },
    handleDelete($index, row) {
      this.$confirm(
        this.$t("此操作将永久删除该数据, 是否继续?"),
        this.$t("提示"),
        {
          confirmButtonText: this.$t("确定"),
          cancelButtonText: this.$t("取消"),
          type: "warning",
        }
      )
        .then(async () => {
          this.tableData.splice($index, 1);
          this.tableTotal--;
          await api.remove(row.f_Id);
          this.$message({
            type: "success",
            message: this.$t("删除成功!"),
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: this.$t("已取消删除!"),
          });
        });
    },
    handleAdd() {
      this.formEdit = false;
      this.formDetails = false;
      this.handleShowForm("新增采购申请");
    },

    async handleSave(showLoading, hideLoading) {
      showLoading("保存数据中...");
      if (await this.$refs.form.validateForm()) {
        const res = await this.$refs.form.saveForm({
          keyValue: this.formEdit ? this.formEditRow.f_Id : "",
          isEdit: this.formEdit,
        });
        if (res) {
          const msg = this.formEdit ? "更新成功!" : "新增成功!";
          this.$message({
            type: "success",
            message: this.$t(msg),
          });
          this.loadTableData();
          this.formVisible = false;
        }
      }
      hideLoading();
    },

    handleShowForm(text) {
      this.formTitle = text;
      this.formVisible = true;
    },
    async handleOpenedForm(showLoading, hideLoading) {
      if (this.formEdit) {
        showLoading("加载数据中...");
        await this.$refs.form.loadFormData({ keyValue: this.formEditRow.f_Id });
        hideLoading();
      }
    },
    handleCloseForm() {
      this.$refs.form.resetForm();
    },

    getSynopsis(str) {
      const list = str.split(",");
      if (list.length == 1) {
        return `${list[0].split(":")[0]}`;
      }
      return `${list[0].split(":")[0]}等${list.length}项`;
    },
  },
};
</script>

<style lang="scss">
.erpcase-apply-popover {
  padding: 0;

  .el-popover__title {
    font-size: 14px;
    color: #333;
    margin: 0;
    padding-left: 10px;
    line-height: 40px;
    font-weight: bold;
  }

  .popover-list {
    max-height: 400;
    overflow: hidden auto;
    border-top: 1px solid #ddd;
    font-size: 14px;
    color: #333;
    line-height: 40px;
    padding-left: 10px;
  }
}
</style>
